import { useState } from 'react'
import { login } from './api/login'


const Login = (props)=>{
    const [user,setUser] = useState({
        username: "",
        password: "",
    })
    // 赋值函数
    const changeUser = (event)=>{
        const input = event.target
        // console.log(input.name,input.value)
        setUser({...user,[input.name]:input.value})
    }
    // 提交函数
    const submit = ()=>{
        // console.log(user)
        // 前端的基础效验
        // 发起一个请求
        login(user).then((res)=>{
            // 1. res.code 1 的话  跳转到首页，并且修改全局用户状态
            // 2. res.data 0 的话  跳转到路由页面
            // console.log(res)
            if (res.data.code) {
                // window.sessionStorage.setItem("user","true")
                props.history.replace("/reactXm/src/pages/Home.jsx")
            }else{
                props.history.replace("/reg")
                alert("登录失败,请先注册")
            }
        })
    }
    return <div>
        用户名：<input 
         placeholder="输入密码"
       style={{width:"300px",height:"40px",borderRadius:"20px", marginTop:"20px",marginLeft:"-3px",}}
         onChange={changeUser} type="text" name="username" value={user.username} /><br/>
        密码:<input 
        placeholder="输入密码"
       style={{width:"300px",height:"40px",borderRadius:"20px", marginTop:"20px",marginLeft:"20px",}}
         onChange={changeUser}  type="password" name="password"  value={user.password} /><br/>
        <button 
        style={{width:"300px",height:"40px",background:"red",color:"white",borderRadius:"20px", marginTop:"70px",marginLeft:"38px",border:"none"}}
         onClick={submit}>登录</button>

    </div>
}

export default Login